<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1 id="a"></h1>
    <script>

        // 定时器参数说明
        //    第一个参数是重复要做的事情 ， 一般写一个函数
        //    第二个参数是时间
        //    第三个和后面的参数是可选的(可有可无的)，如果写了参数那么他就是第一个函数的参数



        // 倒计时
        showTime('a' , new Date('2022-4-18 18:0:0')) ;
        // 万一这个函数有参数
        // var t = setInterval(showTime , 1000 , 'a' , new Date('2022-4-18 18:0:0')) ;

        var t = setInterval(function(){
            showTime('a' , new Date('2022-4-18 18:0:0')) ;
            // console.log(666) ;
        } , 1000)






        function showTime(id , futureTime) {
            var oH1 = document.getElementById(id) ;
            // 将来的某一个时间
            var future = new Date(futureTime) ;
            // 当前的时间
            var now = new Date() ;

            // 时间可以相减 --- 得到是毫秒数
            var gap = parseInt((future - now) / 1000) ;
            // document.write(gap) ;

            if(gap <= 0) {
                oH1.innerHTML = '时间早就过去了' ;
                // 清除定时器
                clearInterval(t) ;
            }
            else {
                var h = parseInt(gap / 3600) ;
                var m = parseInt(gap % 3600 / 60) ;
                var s = gap % 60 ;
                
                oH1.innerHTML = h + ':' + m + ':' + s ;
            }

            
        }






        

    </script>
    
</body>
</html>